<template>
  <div>
    姓名：{{ name }} <br />
    年龄：{{ age }} <br />
    <button @click="changeName">更改姓名</button> &nbsp; &nbsp;
    <button @click="changeAge">更改Age</button>&nbsp; &nbsp;
  </div>
</template>

<script lang="ts" setup name="UseWatchBaseType">
import { ref, watch } from "vue";
let name = ref("张三");
let age = ref(18);

function changeName() {
  name.value += "~";
}
function changeAge() {
  age.value += 1;
}

watch(
  name,
  (newValue, oldValue) => {
    console.log("name更改了,新值为", newValue, oldValue);
  },
  { deep: true }
);

const stopWatch = watch(age, (newValue, oldValue) => {
  console.log("Age值更改了，新值为", newValue, "老值为：", oldValue);
  if (age.value === 25) {
    console.log("Age等于25了，就不进行监视了");
    stopWatch(); //表示停止监视
  }
});
</script>
